<template>
  <div>
    <!-- Request.vue -->
    <h1>测试axios发送请求</h1>
    <button @click="getMoviesAxios">发送请求访问所有电影列表(封装)</button>
    <button @click="getMovies">发送请求访问所有电影列表</button>||||
    <input type="text" v-model="kw" placeholder="输入关键字">&nbsp;
    <button @click="PostMovies">根据关键字查询所有电影列表</button>
    <button @click="PostMoviesAxios">根据关键字查询所有电影列表(封装)</button>
    <h1>查询结果</h1>

    <div class="header">
      <div class="cover">封面图片</div>
      <div class="title">标题</div>
      <div class="actor">主演</div>
      <div class="showingon">上映时间</div>
      <div class="type">电影类型</div>
      <div class="duration">电影时长</div>
    </div>

    <div class="header"
      v-for="item in movies" :key="item.id">
      <div class="cover">
        <img width="60" :src="item.cover" alt="">
      </div>
      <div class="title">{{item.title}}</div>
      <div class="actor">{{item.star_actor}}</div>
      <div class="showingon">{{item.showingon}}</div>
      <div class="type">{{item.type}}</div>
      <div class="duration">{{item.duration}}分钟</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import myaxios from '../http/MyAxios'
import qs from 'qs';
export default {
  data() {
    return {
      kw:'',//关键字
      movies: [], // 存储所有的电影
    };
  },
  methods: {
    PostMoviesAxios(){
      let url="https://web.codeboy.com/bmdapi/movie-infos/name"
      myaxios.post(url,{name:this.kw,page:1,pagesize:10}).then(res=>{
        this.movies=res.data.data.result
      })
    },
    getMoviesAxios(){
      let url = "https://web.codeboy.com/bmdapi/movie-infos"
      myaxios.get(url,{page:1,pagesize:10}).then(res=>{
        this.movies=res.data.data.result
      })
    },
    // 发送axios请求，get请求，访问电影列表
    getMovies() {
      let instance = axios.create(); // axios实例 用于发请求
      instance({
        url: "https://web.codeboy.com/bmdapi/movie-infos",
        method: "GET",
        params: { page: 1, pagesize: 20 },
      }).then((res) => {
        console.log(res);
        // 将res.data.data.result 存入data中，即可在页面使用v-for显示
        this.movies = res.data.data.result;
      });
    },
    // POST模糊查询
    PostMovies(){
      let instance = axios.create();
      let params = {name  :this.kw, page:1, pagesize:10} 
      instance({
        url:"https://web.codeboy.com/bmdapi/movie-infos/name",
        method:'POST',
        data:qs.stringify(params)
      }).then((res)=>{
        console.log(res);
        this.movies=res.data.data.result
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    width: 80%;
    margin: 0px auto;
    padding: 15px 0px;
    border-bottom: 1px solid #ccc;
    .cover { width: 150px; }
    .title { flex: 1;}
    .actor { width: 250px; }
    .showingon { width: 150px; }
    .type { width: 200px; }
    .duration { width: 150px; }
}
</style>
